<template>
	<div>
		<!-- 下载app -->
		<div class="headerBar">
			<div class="headerBar-fixed"></div>
			<i class="download">下载app</i>
			<a href="" class="search">
				<van-icon class="search-icon" name="search" />
			</a>
		</div>
		<div class="ancient-container">
			<!-- 海报 -->
			<div class="poster">
				<img :src="imgwrap1">
			</div>
				<h1>中国戏曲｜粤剧京剧名家精选</h1>
				<span>#京剧 #y粤剧</span>
				<!-- 歌单 -->
			<div class="song-list-box">
				<ul class="song-list">
					<li class="lists" v-for="(item,index) in ancientSong"  :key="index">
						<div class="left"><img :src="item.url" alt=""></div>
						<div class="title">{{item.title}}</div>
						<div class="time">{{item.time}}</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- 下载收藏 -->
		<div class="bottom-bar">
			<div class="safe-area">
				<div class="left">
					<div class="download">
						<img src="../assets/hyimg/download.png" alt="">
						<span>下载</span>
					</div>
					<div class="collect">
						<img src="../assets/hyimg/collect.png" alt="">
						<span>收藏</span>
						</div>
				</div>
				<div class="play-all">
					<van-icon class="play" name="play" />
					<span>播放全部</span>
				</div>
			</div>
		</div>
		<!-- 播放 下一首 -->
		<div class="footBar">
			<div class="player">
				<div class="info">
					<span>暂无歌曲播放</span>
				</div>
				<div class="control">
					<span class="play"></span>
					<span class="next"></span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
	  name: '',
	  data(){
		  return{
			imgwrap1:require("../assets/hyimg/yueju.jpg"),
			ancientSong:[
				{url:require("../assets/hyimg/yueju1.jpg"),title:"七月落薇花（其一）",time:"03:10"},
				{url:require("../assets/hyimg/yueju1.jpg"),title:"七月落薇花（其二）",time:"03:16"},
				{url:require("../assets/hyimg/yueju1.jpg"),title:"七月落薇花（其三）",time:"02:51"},
				{url:require("../assets/hyimg/yueju1.jpg"),title:"七月落薇花（其四）",time:"03:15"},
				{url:require("../assets/hyimg/yueju1.jpg"),title:"二进宫（头段）",time:"02:50"},
				{url:require("../assets/hyimg/yueju1.jpg"),title:"二进宫（二段）",time:"03:00"},
				{url:require("../assets/hyimg/yueju1.jpg"),title:"珠帘寨（头段）",time:"03:19"},
				{url:require("../assets/hyimg/yueju1.jpg"),title:"二龙戏珠（二段）",time:"03:17"},
				{url:require("../assets/hyimg/yueju1.jpg"),title:"大保国（头段）",time:"02:56"},
				{url:require("../assets/hyimg/yueju1.jpg"),title:"大保国（二段）",time:"02:49"},
				{url:require("../assets/hyimg/yueju1.jpg"),title:"乌盆记（头段）",time:"03:00"},
				{url:require("../assets/hyimg/yueju1.jpg"),title:"乌盆记（二段）",time:"03:09"},
				{url:require("../assets/hyimg/yueju1.jpg"),title:"卖马",time:"03:01"},
				{url:require("../assets/hyimg/yueju1.jpg"),title:"打鼓骂曹",time:"02:59"},
				{url:require("../assets/hyimg/yueju2.jpg"),title:"宇宙锋（十三段）",time:"03:34"},
				{url:require("../assets/hyimg/yueju2.jpg"),title:"宇宙锋（十四段）",time:"03:15"},
			]
			  }
			  }
			  }
</script>

<style>
</style>
